<!DOCTYPE html>
<html lang="ch" xmlns:th="https://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>V视界后台管理</title>
    <link rel="stylesheet" href="../iconfont/iconfont.css" type="text/css" th:href="@{/static/iconfont/iconfont.css}">
    <link rel="stylesheet" href="../css/backstage.css" th:href="@{/static/css/backstage.css}">
    <link rel="stylesheet" href="../customAlertConfirm/customAlertConfirm.css" th:href="@{/static/customAlertConfirm/customAlertConfirm.css}">


</head>

<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="outerBox">
    <div class="headerBox">
        <div class="logoBox">
            <img src="../img/logo.png" alt="logo" class="logo" th:src="@{/static/img/logo.png}">
        </div>
        <div class="titleBox">
            <h1>V视界后台管理</h1>
        </div>
        <div class="managerBox">
            <span>你好,<i th:text="${username}">username</i></span>
            <a th:href="@{/manager/managerLogout}" class="exit">退出</a>
        </div>
    </div>
    <div class="navBox">

        <ul class="navList userNav">
            <a th:href="@{/user/userList}">
                <li class="navLi">
                    <i class="iconfont icon-geren">用户管理</i>
                </li>
            </a>
            <a th:href="@{/manager/getHotSearchBlog}">
                <li class="navLi">
                    <i class="iconfont icon-bowenshu">博文管理</i>
                </li>
            </a>
            <a th:href="@{/blog/getAuditBlogList}">
                <li class="navLi">
                    <i class="iconfont icon-shenhe">博文审核</i>
                </li>
            </a>
            <a th:href="@{/manager/typeList}">
                <li class="navLi">
                    <i class="iconfont icon-leimupinleifenleileibie">类别管理</i>
                </li>
            </a>
            <li class="navLi active">
                <i class="iconfont">&#xe6d6;举报处理</i>
            </li>
        </ul>
    </div>
    <div class="opeBox">
        <ul class="opeList">
            <li class="opeLi show">
                <div class="reportHandle">
                    <h2 class="opeTitle">举报处理</h2>
                    <div class="tableBox">
                        <table class="reportTable infoTable">
                            <thead>
                                <tr>
                                    <th>被举报用户昵称</th>
                                    <th>举报人数</th>
                                    <th>举报原因</th>
                                    <th>文章id</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="reports:${pageBean.rows}">
                                    <td th:text="${reports.username}"></td>
                                    <td th:text="${reports.number}"></td>
                                    <td class="reasonTd">
                                        <p th:text="${reports.list[0]}"></p>
                                        <div class="hiddenReasons">
                                            <ul >
                                                <li  th:each="reasons:${reports.list}" th:text="${reasons}"></li>
                                            </ul>
                                        </div>
                                        <i class="iconfont showAllReasons">&#xeb10;</i>
                                    </td>
                                    <td th:text="${reports.id}"></td>
                                    <td>
                                        <button class="showBlogContent">查看原文</button>
                                        <div class="reportBlogBox hidden">
                                            <div class="reportBlogContent">
                                                <div class="userInfo">
                                                    <img alt="头像" class="headPhoto" th:src="@{${reports.userUrl}}">
                                                    <p class="userName" th:text="${reports.username}">用户名称</p>
                                                    <p class="postTime" th:text="${reports.time}">发布时间</p>
                                                </div>
                                                <div class="blogContent">
                                                    <div class="blogText" th:text="${reports.text}">
                                                        文字内容
                                                    </div>
                                                    <div class="blogImg">
                                                        <div th:each="picture:${reports.pictureUrl}" >
                                                            <img alt="博客图片" th:src="@{${picture}}">
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="button" class="passReport">封禁</button>
                                                <button type="button" class="rejectReport">驳回</button>
                                                <button class="hiddenBlogContent">&times;</button>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="pageBox reportPage">
                        <div>
                            <button class="reportPrePage"><</button>
                            <button class="showReportPage showPage" style="width: 35px;cursor: inherit;">0</button>
                            <button class="reportNextPage">></button>
                        </div>
                        <div class="showReportTotalPage showTotalPage">共0页</div>
                        <div>
                            <form class="reportPageForm pageForm" th:action="@{/manager/getReportForManager}" method="get">
                                到第<input type="number" name="pageNo" class="userPageNo"  step="any">页
                                <button>跳转</button>
                            </form>
                            <form class="hiddenReportPageForm hidden" th:action="@{/manager/getReportForManager}" method="get">
                                <input type="number" name="pageNo" class="hiddenUserPageNo">
                            </form>
                        </div>
                        <script type="text/javascript" th:inline="javascript">

                            let totalNumber = [[${pageBean.total}]]
                            let totalPage = Math.ceil(totalNumber / 10)
                            const reportPrePage = document.querySelector('.reportPrePage')
                            const reportNextPage = document.querySelector('.reportNextPage')
                            const showReportPage=document.querySelector('.showReportPage')
                            const showReportTotalPage=document.querySelector('.showReportTotalPage')
                            const hiddenReportPageForm=document.querySelector('.hiddenReportPageForm')
                            const reportPageForm = document.querySelector('.reportPageForm')
                            // 若直接将pagecount设置为1，则因为表单提交时的网页刷新导致pagecount重新变回1，所以要将其以会话储存的方式保存
                            var reportPageCount = sessionStorage.getItem('reportPageCount') || 1

                            showReportPage.innerHTML = `${reportPageCount}`
                            showReportTotalPage.innerHTML = `共${totalPage}页`
                            //分别为上一页、下一页添加点击事件
                            reportPrePage.addEventListener('click', () => {
                                // 判断页码数大小，小于等于1则返回，并提示信息
                                if (reportPageCount <= 1) {
                                    showCustomAlert('当前已是第一页', false)
                                    return
                                }
                                // 若没问题则对userPageCount--，调用方法重新渲染用户信息
                                reportPageCount--
                                updatePageNumber()
                            })

                            reportNextPage.addEventListener('click', () => {
                                // 大于等于最大页码数时，返回，提示信息
                                if (reportPageCount >= totalPage) {
                                    showCustomAlert('当前已是最后一页', false)
                                    return
                                }
                                // 否侧进行++，调用方法
                                reportPageCount++
                                updatePageNumber()
                            })
                            function updatePageNumber() {
                                // 将userPageCount储存在会话储存中，防止页面刷新导致pagecount丢失
                                sessionStorage.setItem('reportPageCount', reportPageCount)
                                hiddenReportPageForm.pageNo.value = reportPageCount
                                hiddenReportPageForm.submit()
                            }
                            reportPageForm.addEventListener('submit',(e)=>{
                                e.preventDefault()
                                if(reportPageForm.pageNo.value<=0||reportPageForm.pageNo.value>totalPage||!(reportPageForm.pageNo.value%1 === 0)){
                                    showCustomAlert('输入的页码数有误，请重新输入',false)
                                    reportPageForm.reset()
                                }else{
                                    reportPageCount=reportPageForm.pageNo.value
                                    sessionStorage.setItem('reportPageCount', reportPageCount)
                                    reportPageForm.submit()
                                }
                            })
                        </script>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
<script src="../../static/customAlertConfirm/customAlertConfirm.js" th:src="@{/static/customAlertConfirm/customAlertConfirm.js}"></script>
<script  th:src="@{/static/js/backstage-reportHandle.js}"></script>
<script th:inline="javascript">
</script>
</html>